<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" href="static/js/plugins/layui/css/layui.css">
    <link href="static/css/bootstrap.min.css?v=3.3.7" rel="stylesheet"/>
    <link href="static/css/font-awesome.css?v=4.4.0" rel="stylesheet"/>
    <link href="static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="static/css/animate.css" rel="stylesheet"/>
    <link href="static/css/style.css?v=4.1.0" rel="stylesheet"/>
    <link href="static/module/treetable-lay/treetable.css" rel="stylesheet"/>
    <link href="static/module/treetable-lay/treetable.js" rel="stylesheet"/>
    <style>
        #demo1 {
            width: 100px;
            height: 100px;
        }

        .ibox-title {
            min-height: 15px;
        }

        .ml_20 {
            margin-left: 20px;
        }

        .w100 {
            width: 100px !important;
        }

        .mt-60 {
            margin-top: -60px;
        }

        .layui-table-cell {
            align-content: center;
            height: auto;
        }

        .layui-table img {
            max-width: 300px
        }

        .tishi {
            color: red;
        }
    </style>
</head>
<body>
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/module/treetable-lay/treetable.js" charset="utf-8"></script>
<script src="static/module/treetable-lay/treetable.css" charset="utf-8"></script>
<div class="layui-card-body">
    <div style="padding-bottom: 10px;" id="LAY_lay_add">
        <button class="layui-btn layuiadmin-btn-role " lay-event="add" id="tj"><i
                class="layui-icon layui-icon-add-circle-fine"></i> 添加
        </button>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="search" id="Lay_toSearch_input" placeholder="请输入分类名称" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <button type="button" class="layui-btn layui-btn-normal" id="btn-search"<%-- onclick="doSearch()"--%>>
                <i class="layui-icon layui-icon-search"></i> 搜索
            </button>
        </div>
        &nbsp;
        <div class="layui-btn-group">
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn" id="btn-fold">全部折叠</button>
            <button class="layui-btn" id="btn-refresh">刷新表格</button>
        </div>
        <%--
                <button type="button" class="layui-btn layui-btn-normal  change-icon">随机更换小图标</button>
        --%>
    </div>

    <%--树形表格--%>
    <table class="layui-table" id="test" lay-filter="test"></table>

    <%--树形菜单--%>
    <div id="Lay_category_tree" lay-filter="Lay_category_tree"></div>

    <%--Table表格--%>
    <%-- <table id="Lay_back_table" lay-filter="Lay_back_table"></table>--%>


</div>
<%--<script type="text/html" id="toolbarDemo">--%>
<%--    <div class="layui-btn-container">--%>
<%--        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>--%>
<%--        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delAll"> 批量删除 </button>--%>
<%--    </div>--%>
<%--</script>>--%>
<script type="text/html" id="updateAndDelete">
    <button type="button" class="layui-btn  layui-btn-normal" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>修改
    </button>
    <button type="button" class="layui-btn layui-btn-danger" lay-event="delAll">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </button>
</script>

<%--弹出层--%>

<form id="addForm" class="layui-form">
    <div class="layui-form" lay-filter="layuiconfig-form-role" id="layuiconfig-form-role"
         style="padding: 20px 30px 0 0;display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input name="className" id="className" class="layui-input">
                <input name="classId" id="classId" lay-type="hide" type="hidden" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类编码</label>
            <div class="layui-input-block">
                <input name="classCode" id="classCode" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类状态</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" value="1" checked name="classIdStatus"
                       id="classIdStatus" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" id="Lay_select_Level">
            <label class="layui-form-label">请选择分类级别</label>
            <div class="layui-input-block">
                <select name="classIdLevel" lay-verify="required" lay-filter="classIdLevel">
                    <option value=""></option>
                    <option value="1" selected>一级分类</option>
                    <option value="2">二级分类</option>
                    <option value="3">商品</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item" style="display: none" id="Lay_One_Level">
            <label class="layui-form-label">请选择所属的一级分类</label>
            <div class="layui-input-block">
                <select name="parentId" id="parentId" lay-filter="parent_classIdLevel_One">
                    <option value=""></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="display: none" id="Lay_Two_Level">
            <label class="layui-form-label">请选择所属的二级分类</label>
            <div class="layui-input-block">
                <select name="parentId2" id="Two_parentId" lay-filter="parent_classIdLevel_Two">
                    <option value=""></option>
                </select>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">
    window.name = "butt";
    layui.config({
        base: 'static/module/' //   资源所在路径
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['treetable', 'table', 'layer'], function () {
        var treetable = layui.treetable;
        var layer = layui.layer;
        var table = layui.table;
        var $ = layui.jquery;
        var re;
        // 渲染表格
        var renderTable = function () {
            layer.load(3);
            re = treetable.render({
                elem: '#test',
                url: 'spcx?opr=sjlx',
                treeColIndex: 1,          // treetable新增参数
                treeSpid: 0,             // treetable新增参数
                skin: 'line',
                treeLinkage: true,
                treeIdName: 'eid',       // 	id字段的名称
                treePidName: 'yid',    // 	pid字段的名称
                treeDefaultClose: true,     //是否默认折叠
                page: false,
                //treeLinkage: true,      //父级展开时是否自动展开所有子级
                cols: [[
                    {type: 'numbers', width: "8%"},
                    {title: "分类名称", field: "etype", width: "34%"},
                    {title: "编码", field: "eid", hide: true},
                    {
                        field: 'resType', title: '级别', width: "12%", sort: true, templet: function (d) {
                            var e = d.resType;
                            if (e == "一级分类") {
                                e = '<a style="color: #1296db" lay-event="jin">一级分类</a>';
                                return e;
                            } else if (e == "二级分类") {
                                e = '<a style="color: #1afa29" lay-event="jin">二级分类</a>';
                                return e;
                            } else if (e == "商品") {
                                e = '<a style="color: #f4ea2a" lay-event="jin">商品</a>';
                                return e;
                            }
                        }
                    },
                    {
                        field: 'fj', title: '父级', width: "12%", sort: true, templet: function (d) {
                            var e = d.fj;
                            if (e == "无") {
                                e = '<a style="color: #d81e06" lay-event="jin">无</a>';
                                return e;
                            } else {
                                return e;
                            }
                        }
                    },
                    {
                        title: '头像', width: "12%", field: 'img', templet: function (d) {
                            return '<img onclick="showimg(this)" id="driimg" style="display: inline-block; width: 50px; height: 50px; border-radius:50%;" src="' + d.img + '">';
                        }
                    },
                    {title: "操作", width: "22%", toolbar: "#updateAndDelete"}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }

            })
        };


        layui.use(['form', 'upload', 'table', 'element', 'layer', 'laydate'], function () {
            let $ = layui.jquery
            let upload = layui.upload
            let element = layui.element
            let layer = layui.layer;
            let laydate = layui.laydate;
            let table = layui.table;
            var form = layui.form
            //上传文件
            var uploadInst = upload.render({
                elem: '#test1'
                , url: 'spcx?opr=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    // 给隐藏表单赋值
                    $("#photo").val(res.imgSrc);
                    $('#demoText').html('');
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
                //进度条
                , progress: function (n, elem, e) {
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
            $("#tj").click(function () {
                let index = layer.open({
                    title: '添加类型',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'leixtj.jsp',
                    end: function () {
                        location.reload();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            });

            table.on('tool(test)', function (obj) {
                switch (obj.event) {  // 监听添加操作
                    case 'delAll':
                        let a = obj.data.resType;
                        if (a == '商品') {
                            layer.confirm('此类型为您的商品 请谨慎操作', {icon: 3, title: '提示信息'}, function (index) {
                                $.ajax({
                                    url: "spcx?opr=delej",
                                    "dataType": 'text',
                                    "type": 'post',
                                    "data": {id: obj.data.eid},
                                    async: false,
                                    "success": function (msg) {
                                        if (msg == "true") {
                                            layer.msg('删除成功!', {time: 1000});
                                            top.window['upload'].frames.location.reload();
                                            top.window['lode'].frames.location.reload();
                                            let b=sessionStorage.obs;
                                            let a=b.replace(/\"/g, "");
                                            let cz="商品分类";
                                            let gn="类型删除";
                                            let jg="成功";
                                            $.ajax({
                                                "url": "gly?opr=xmr",
                                                "data": {name:a,cz:cz,gn:gn,jg:jg}
                                            })
                                            top.window['hsz'].frames.location.reload();
                                            top.window['upload'].frames.location.reload();
                                            renderTable();
                                        } else {
                                            layer.msg('删除失败', {time: 1000});
                                            let b=sessionStorage.obs;
                                            let a=b.replace(/\"/g, "");
                                            let cz="商品分类";
                                            let gn="类型删除";
                                            let jg="失败";
                                            $.ajax({
                                                "url": "gly?opr=xmr",
                                                "data": {name:a,cz:cz,gn:gn,jg:jg}
                                            })
                                        }
                                    }
                                });
                                layer.close(index);
                            });
                        } else {
                            $.ajax({
                                url: "spcx?opr=jbsc",
                                "dataType": 'text',
                                "type": 'post',
                                "data": {id: obj.data.eid},
                                async: false,
                                "success": function (msg) {
                                    if (msg == "true") {
                                        layer.msg('有子类型 无法删除!', {time: 1000});
                                        renderTable();
                                    } else {
                                        layer.msg('删除成功', {time: 1000});
                                        top.window['upload'].frames.location.reload();
                                        top.window['lode'].frames.location.reload();
                                        let b=sessionStorage.obs;
                                        let a=b.replace(/\"/g, "");
                                        let cz="商品分类";
                                        let gn="分类删除";
                                        let jg="成功";
                                        $.ajax({
                                            "url": "gly?opr=xmr",
                                            "data": {name:a,cz:cz,gn:gn,jg:jg}
                                        })
                                        renderTable();
                                    }
                                }
                            });
                        }
                        break;
                    case'edit':
                        layer.open({
                            title: '修改类型',
                            type: 1,
                            shade: 0.2,
                            maxmin: true,
                            shadeClose: true,
                            area: ['100%', '100%'],
                            content: $("#editForm"),
                            success: function () {
                                //进后台查找类型
                                $.ajax({
                                    "url": "spcx?opr=yijxg",
                                    "type": 'post',
                                    "data": {id: obj.data.etype},
                                    async: false,   //如果不加，无法实现数据传值
                                    "dataType": 'json',
                                    "success": function (datajson) {
                                        $("#roleId").find("option").remove();
                                        if (datajson == null || datajson == "") {
                                            $("#roleId").append("<option name='ss' id='ss'>无</option>");
                                        } else {
                                            var select = $("#cRoleName");
                                            $(datajson).each(function (key) {  //循环读取后台传来的Json数据
                                                var roleName = datajson[key].etype;
                                                //调用自定义方法
                                                AppendNodes(roleName, roleName);//将value和text添加到下拉框中
                                            });
                                        }
                                    },
                                    error: function () {
                                        alert("出现错误");
                                    }
                                })

                                function AppendNodes(value, text) {
                                    $("#roleId").append("<option  value='" + value + "'  name='rr' id='rr'>" + text + "</option>");
                                }

                                $("#roleIds").find("option").remove();
                                $.ajax({
                                    "url": "spcx?opr=yijxgs",
                                    "type": 'post',
                                    "data": {id: obj.data.etype},
                                    async: false,   //如果不加，无法实现数据传值
                                    "dataType": 'json',
                                    "success": function (datajson) {
                                        var select = $("#cRoleName");
                                        if (datajson == null || datajson == "") {
                                            $("#roleIds").append("<option name='ss' id='ss'>无</option>");
                                        } else {
                                            $(datajson).each(function (key) {  //循环读取后台传来的Json数据
                                                var roleNames = datajson[key].etype;
                                                //调用自定义方法
                                                AppendNode(roleNames, roleNames);//将value和text添加到下拉框中
                                            });
                                        }
                                    },
                                    error: function () {
                                        alert("出现错误");
                                    }
                                })

                                function AppendNode(value, text) {
                                    $("#roleIds").append("<option  value='" + value + "'  name='ss' id='ss'>" + text + "</option>");
                                }

                                $('#leix').val(obj.data.etype);
                                $('#eid').val(obj.data.eid);
                                document.getElementById("demo1").src = obj.data.img;
                                let url = obj.data.img;
                                var index = url.lastIndexOf("\/");
                                strs = url.substring(index + 1, url.length);
                                $("#photo").val(strs);
                                form.render();
                            },
                        });
                        break
                }
            });
            //监听提交
            form.on('submit(saveBtn)', function (data) {
                var myselect = document.getElementById("roleId");
                var index = myselect.selectedIndex;             // selectedIndex代表的是你所选中项的index
                myselect.options[index].value;
                let rr = myselect.options[index].text;

                var myselects = document.getElementById("roleIds");
                var indexs = myselects.selectedIndex;             // selectedIndex代表的是你所选中项的index
                myselects.options[indexs].value;
                let rrs = myselects.options[indexs].text;
                let lei = $("#leix").val();
                if (lei == rr || lei == rrs) {
                    $(".tishi").text("类型名称重复").show(200);
                    $(".tishi").delay(2500).hide(200);
                } else {
                    layer.close(index);
                        let post_data = $("form").serialize();
                        $.ajax({
                            "url": "spcx?opr=addSave3",
                            "dataType": 'text',
                            "type": 'post',
                            "data": post_data,
                            async: false,
                            "success": function (date) {
                                top.window['upload'].frames.location.reload();
                                top.window['lode'].frames.location.reload();
                                if (date == "true") {
                                    layer.msg('修改成功', {icon: 1, time: 1500}, function () {
                                        // 关闭弹出层
                                        layer.closeAll();
                                        renderTable();
                                        let b=sessionStorage.obs;
                                        let a=b.replace(/\"/g, "");
                                        let cz="商品分类";
                                        let gn="类型修改";
                                        let jg="成功";
                                        $.ajax({
                                            "url": "gly?opr=xmr",
                                            "data": {name:a,cz:cz,gn:gn,jg:jg}
                                        })
                                    });
                                } else {
                                    layer.msg('修改失败', {icon: 2, time: 1500});
                                    let b=sessionStorage.obs;
                                    let a=b.replace(/\"/g, "");
                                    let cz="商品类型";
                                    let gn="类型修改";
                                    let jg="失败";
                                    $.ajax({
                                        "url": "gly?opr=xmr",
                                        "data": {name:a,cz:cz,gn:gn,jg:jg}
                                    })
                                }
                            }
                        });
                        layer.close(index);
                }
                return false;
            });
        })

        renderTable();
        //展开所有
        $('#btn-expand').click(function () {
            //alert(0)
            treetable.expandAll('#test');
        });
        //折叠所有
        $('#btn-fold').click(function () {
            // alert(1)
            treetable.foldAll('#test');
        });
        //刷新表格
        $('#btn-refresh').click(function () {
            renderTable();
        });

        $('#btn-search').click(function () {
            //获取输入框中的值
            var keyword = $('#Lay_toSearch_input').val();
            var searchCount = 0;
            $('#test').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword != '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        treetable.expandAll('#test');
                        $('html,body').stop(true);
                        $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword == '') {
                layer.msg("请输入搜索内容", {icon: 5});
            } else if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5});
            }
        });
    });

    //这是一棵树，
    layui.use(['table', 'tree', "layer", 'jquery', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var tree = layui.tree;
        var $ = layui.jquery;

        $.ajax({
            url: "${pageContext.request.contextPath}/goodscategory/selectTree",
            success: function (data) {
                //console.log(data);
                //渲染
                var inst1 = tree.render({
                    elem: '#Lay_category_tree',  //绑定元素
                    data: data.data,
                    showCheckbox: true
                    // accordion:true
                });
            }
        });
    });


    //搜索操作
    function doSearch() {
        //1.获取到输入框中输入的内容
        var searchName = $('#Lay_toSearch_input').val();
        //发送请求，并且接收数据
        layui.use('table', function () {
            var table = layui.table;
            table.reload('Lay_back_table', {
                where: {"platform": searchName}
            });
        });
    }

    function showimg(t) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '516px',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img style="display: inline-block; width: 100%; height: 100%;" src="' + t.src + '">'
        });
    }
</script>
<form id="editForm" method="post" style="display:none;">
    <div class="layui-form layuimini-form">
        <input type="hidden" name="eid" id="eid">
        <div class="layui-form-item">
            <label class="layui-form-label required">一级类型</label>
            <div class="layui-input-block">
                <%--                <input type="text" name="name" required lay-verify="required" placeholder="请选择类型" autocomplete="off" class="layui-input" id="yhm"><span class="tishi"></span>--%>
                <select style="width: 180px;height: 30px;" class="ipt" id="roleId">
                    <option>无一级类型</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">父级名称</label>
            <div class="layui-input-block">
                <select style="width: 180px;height: 30px;" class="ipt" id="roleIds">
                    <option>无父级类型</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">名称</label>
            <div class="layui-input-block">
                <input type="text" name="leix" lay-verify="required" lay-reqtext="类型必填" placeholder="请输入修改的类型" value=""
                       class="layui-input" id="leix"><span class="tishi"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主图</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img onclick="showimg(this)" class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
                <input type="hidden" name="status" id="zhuangtai">
            </div>
        </div>
        <%--    隱藏表单 存储上传成功后 回调返回的文件名--%>
        <input type="hidden" name="photo" id="photo"><br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn" id="saveBtn">确认修改</button>
            </div>
        </div>
    </div>
</form>
</body>
</html>
